import React, { useContext, useEffect } from 'react';

import { ModalContext } from '@/shared/context/ModalContext';
import { useScrollLock } from '@/shared/lib/hooks/useScrollLock';
import { modalsComponentsMap as modals } from '@/shared/lib/modals';

export const ModalContainer = () => {
  const { id, data, closeModal } = useContext(ModalContext);
  const { lock, unlock } = useScrollLock();

  useEffect(() => {
    if (id !== null) {
      lock();
    } else {
      unlock();
    }
  }, [id]);

  if (!id) {
    return <></>;
  }

  const Modal = modals[id];

  const handleModalClose = () => closeModal();

  return <Modal data={data} onClose={handleModalClose} />;
};
